<template>
    <div class="progress-bar" ref="progressBar" @click="progressClick">
      <div class="bar-inner">
        <div class="progress" ref="progress"></div>
        <div class="progress-btn-wrapper" ref="progressBtn"
             @touchstart.prevent="progressTouchStart"
             @touchmove.prevent="progressTouchMove"
             @touchend="progressTouchEnd"
        >
          <div class="progress-btn"></div>
        </div>
      </div>
    </div>
</template>

<script>
    import {prefixStyle} from "common/js/dom"; // 引入封装transform
    const progressBtnWidth = 16;// 进度条上小球的宽度
    const transform = prefixStyle('transform');
    export default {
        name: "progress-bar",
        props:{
          percent:{ // 百分比
            type: Number,
            default: 0
          }
        },
      data () {
          return {

          }
      },
      created () {
        this.touch = {}
      },
      methods: {
        // 定义进度条拖动 开始
        progressTouchStart (e) {
          this.touch.initiated = true; // 开始
          this.touch.startX = e.touches[0].pageX; // 记录开始位置
          this.touch.left = this.$refs.progress.clientWidth;// 已经播放的位置
        },
        // 移动进度条
        progressTouchMove (e) {
          if (!this.touch.initiated) {
            return
          }
          const deltaX = e.touches[0].pageX -this.touch.startX; // 偏移的距离
          // 计算滚动位置，但不能超过进度条的总长
          const offsetWidth =Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth ,Math.max(0,this.touch.left + deltaX));// 已经播放的位置 + 偏移的位置
          this._offset(offsetWidth);

        },
        progressTouchEnd () {
          this.touch.initiated = false;
          // 拖动停止后，然进度也跟着改变
          this._triggerPercent()
        },
        // 点击进度条
        progressClick (e) {
          this._offset(e.offsetX);
          this._triggerPercent();
        },
        // 拖动后改变进度传递给父组件
        _triggerPercent () {
          // 进度总长
          const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
          // percent(比例) = 已播放位置 / 进度总长
          const percent = this.$refs.progress.clientWidth / barWidth;
          this.$emit('percentChange',percent);
        },
        // 动画效果封装
        _offset(offsetWidth) {
          this.$refs.progress.style.width = `${offsetWidth}px`;
          this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px, 0, 0)`;
        }
      },
      // 监听计算进度条
      watch:{
          percent (newPercent) {
            if (newPercent >=0 && !this.touch.initiated) {
              // 定义进度条的总宽度 总宽度 = 进度条的总宽度 - 小球的宽度
              const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
              // 当前已播放的进度(宽度) = 父组件传进来的newPercent x 总进度(宽度)
              // 例如 歌曲的总时长 5分钟 ，已经播放了1分钟； 1/5 = 0.2;把0.2传到这里进行计算，0.2 * 总共的宽度 = 当前已播放的进度
              // 当前的播放进度 = 歌曲播放的比例 * 歌曲总时长
              const offsetWidth = newPercent * barWidth;
              this._offset(offsetWidth);
            }
          }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .progress-bar
    height: 30px
    .bar-inner
      position: relative
      top: 13px
      height: 4px
      background: rgba(0, 0, 0, 0.3)
      .progress
        position: absolute
        height: 100%
        background: $color-theme
      .progress-btn-wrapper
        position: absolute
        left: -8px
        top: -13px
        width: 30px
        height: 30px
        .progress-btn
          position: relative
          top: 7px
          left: 7px
          box-sizing: border-box
          width: 16px
          height: 16px
          border: 3px solid $color-text
          border-radius: 50%
          background: $color-theme
</style>
